<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/taglibs.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript" charset="utf-8">
        var portalLayout;
        var portal;
        var panels;
        $(function() {
            portalLayout = $('#portalLayout').layout({
                fit : true
            });
            $(window).resize(function() {
                portalLayout.layout('panel', 'center').panel('resize', {
                    width : 1,
                    height : 1
                });
            });

            panels = [ {
                id : 'p1',
                title : '关于',
                height : 200,
                collapsible : true,
                href : ''
            }, {
                id : 'p2',
                title : 'link',
                height : 200,
                collapsible : true,
                href : ''
            },{
                id : 'p3',
                title : 'link',
                height : 200,
                collapsible : true,
                href : ''
            }];

            portal = $('#portal').portal({
                border : false,
                fit : true,
                onStateChange : function() {
                    $.cookie('portal-state', getPortalState(), {
                        expires : 7
                    });
                }
            });
            var state = $.cookie('portal-state');
            if (!state) {
                state = 'p1,p2,p3';/*冒号代表列，逗号代表行*/
            }
            addPortalPanels(state);
            portal.portal('resize');

        });

        function getPanelOptions(id) {
            for ( var i = 0; i < panels.length; i++) {
                if (panels[i].id == id) {
                    return panels[i];
                }
            }
            return undefined;
        }
        function getPortalState() {
            var aa = [];
            for ( var columnIndex = 0; columnIndex < 2; columnIndex++) {
                var cc = [];
                var panels = portal.portal('getPanels', columnIndex);
                for ( var i = 0; i < panels.length; i++) {
                    cc.push(panels[i].attr('id'));
                }
                aa.push(cc.join(','));
            }
            return aa.join(':');
        }
        function addPortalPanels(portalState) {
            var columns = portalState.split(':');
            for ( var columnIndex = 0; columnIndex < columns.length; columnIndex++) {
                var cc = columns[columnIndex].split(',');
                for ( var j = 0; j < cc.length; j++) {
                    var options = getPanelOptions(cc[j]);
                    if (options) {
                        var p = $('<div/>').attr('id', options.id).appendTo('body');
                        p.panel(options);
                        portal.portal('add', {
                            panel : p,
                            columnIndex : columnIndex
                        });
                    }
                }
            }
        }
    </script>
</head>
<body>
<div id="portalLayout">
    <div data-options="region:'center',border:false">
        <div id="portal" style="position: relative">
            <div></div>
            <div></div>
        </div>
    </div>
</div>
</body>
</html>